<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>仿小米首页</title>
    <link rel="stylesheet" type="text/css" href="./css/main.css">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <!-- <script type="text/javascript" src="./js/main.js"></script> -->
    <script type="text/javascript" src="./js/main1.js"></script>
</head>
<body>
    <?php for ($i=0; $i <10 ; $i++) {  ?>
    <div id="top">
        <div class="mid top_bg">
            <div class="top_left">
                <a href="">小米商城</a><span>|</span>
                <a href="">MIUI</a><span>|</span>
                <a href="">IoT</a><span>|</span>
                <a href="">云服务</a><span>|</span>
                <a href="">小爱开放平台</a><span>|</span>
                <a href="">金融</a><span>|</span>
                <a href="">有品</a><span>|</span>
                <a href="">政企服务</a><span>|</span>
                <a href="">Select Region</a>
            </div>
            <div class="top_right">
                <a href="">登录</a><span>|</span>
                <a href="">注册</a><span>|</span>
                <a href="">消息通知</a>
                <a class="cart" href=""><i class="iconfont">&#xe698;</i>购物车（0）</a>
            </div>
        </div>
    </div>
    <?php } ?>
    <div id="header">
        <div class="mid">
            <div class="nav">
                <a class="logo"></a>
                <div class="nav_list">
                    <?php for ($i=0; $i <10 ; $i++) {  ?>
                        <a href="">小米手机<?php echo $i; ?></a>
                    <?php } ?> 
                </div>
                <div class="search">
                    <input type="text" class="in" name="">
                    <input type="button" class="btn iconfont" name="" value="&#xe6a4;">
                    <p class="hot_word">
                        <a href="">小米6X</a>
                        <a href="">红米S2</a>
                    </p>
                </div>
            </div>
            <div class="banner" id="banner">
                <ul class="banner_box">
                    <li class="box_item"><img src="./images/1.jpg" alt=""></li>
                    <li class="box_item"><img src="./images/2.jpg" alt=""></li>
                    <li class="box_item"><img src="./images/3.jpg" alt=""></li>
                    <li class="box_item"><img src="./images/4.jpg" alt=""></li>
                    <li class="box_item"><img src="./images/5.jpg" alt=""></li>
                    <li class="box_item"><img src="./images/6.jpg" alt=""></li>
                </ul>
                <ul class="click_list">
                    <li class="click_item" key=0></li>
                    <li class="click_item" key=1></li>
                    <li class="click_item" key=2></li>
                    <li class="click_item" key=3></li>
                    <li class="click_item" key=4></li>
                    <li class="click_item" key=5></li>
                </ul>
                <div class="click_right" id="click_right"></div>
                <div class="click_left" id="click_left"></div>
            </div>
        </div>
    </div>
    <div id="main">
        
    </div>
    <div id="footer"></div>
    <div class="bg">
        <div class="mid">
            <ul class="bg_box">
                <li class="bg_item">bg1</li>
                <li class="bg_item">bg2</li>
                <li class="bg_item">bg3</li>
                <li class="bg_item">bg4</li>
                <li class="bg_item">bg5</li>
                <li class="bg_item">bg6</li>
            </ul>
        </div>
    </div>
</body>
</html>